<template>
	<div class="app-container">
		<div class="wx-user-box">
			<!-- 查询 -->
			<el-form :inline="true" :model="formInline" class="demo-form-inline">
				<el-form-item label="姓名">
					<el-input v-model="formInline.name" clearable placeholder="请输入管理员姓名" style="width: 240px;"
						@change="onSubmit"></el-input>
				</el-form-item>
				<el-form-item label="手机号">
					<el-input v-model="formInline.phone" clearable placeholder="请输入管理员手机号" style="width: 240px;"
						@change="onSubmit"></el-input>
				</el-form-item>
				<el-form-item label="门店">
					<el-select v-model="formInline.shop_id" filterable placeholder="请选择" style="width: 240px;" clearable
						@change="onSubmit">
						<el-option :label="item.shop_name" :value="item.id" v-for="(item, index) in shopList" :key="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="success" @click="addAdmin">添加管理员</el-button>
				</el-form-item>
			</el-form>

			<el-table :data="list" style="width: 100%;margin-bottom: 20px;" row-key="id" border>
				<el-table-column prop="name" label="姓名"></el-table-column>
				<el-table-column prop="phone" label="手机号"></el-table-column>
				<el-table-column label="门店名称">
					<template slot-scope="scope">
						{{scope.row.shop_name}}
					</template>
				</el-table-column>
				<el-table-column label="管理员类型">
					<template slot-scope="scope">
						<el-tag effect="dark">
						   {{types[scope.row.type]}}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createtime" label="创建时间" />
				<el-table-column fixed="right" label="操作" width="200">
					<template slot-scope="scope">
						<el-button size="mini" plain type="primary" @click="resetpass(scope.row.id)">重置密码</el-button>
						<el-button size="mini" plain type="danger" @click="del(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页 -->
			<div class="wx-user-pagination-div">
				<el-pagination background :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="total" :pager-count="pageCount"
					prev-text="上一页" next-text="下一页" @size-change="handleSizeChange"
					@current-change="handleCurrentChange" />
			</div>
			
			<!-- 弹窗 -->
			<el-dialog title="添加管理员" :visible.sync="centerDialogVisible1" width="500px" center @close="reset('form')">
				<el-form ref="form" :rules="rules" :model="form" label-width="80px">
					<el-form-item prop="type" label="类型">
						<el-select v-model="form.type" placeholder="请选择" style="width: 100%" clearable>
							<el-option label="物业管理员" value="1" />
							<el-option label="小区管理员" value="2" />
							<el-option label="门店管理员" value="3" />
						</el-select>
					</el-form-item>
					<el-form-item v-if="form.type==1" prop="wuye_id" label="物业">
						<el-select v-model="form.wuye_id" filterable clearable placeholder="请选择" style="width: 100%">
							<el-option v-for="item in wuye" :key="item.wuye_id" :label="item.wy_name" :value="item.wuye_id" />
						</el-select>
					</el-form-item>
					<el-form-item v-if="form.type==2" prop="xiaoqu_id" label="小区">
						<el-select v-model="form.xiaoqu_id" filterable clearable placeholder="请选择" style="width: 100%">
							<el-option v-for="item in xiaoqu" :key="item.id" :label="item.xq_name" :value="item.id" />
						</el-select>
					</el-form-item>
					<el-form-item v-if="form.type==3" prop="shop_id" label="门店">
						<el-select v-model="form.shop_id" filterable clearable placeholder="请选择" style="width: 100%">
							<el-option v-for="item in shopList" :key="item.id" :label="item.shop_name" :value="item.id" />
						</el-select>
					</el-form-item>
					<el-form-item prop="name" label="姓名">
						<el-input v-model="form.name" placeholder="请输入" clearable />
					</el-form-item>
					<el-form-item prop="phone" label="手机号">
						<el-input v-model="form.phone" maxLength="11" placeholder="请输入" clearable />
					</el-form-item>
					<el-form-item prop="password" label="密码">
						<el-input v-model="form.password" placeholder="请输入" clearable />
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="reset('form')">取 消</el-button>
					<el-button type="primary" @click="submit('form')">确 定</el-button>
				</span>
			</el-dialog>

		</div>
	</div>
</template>

<script>
	import Api from '@/api/pages/mall/index';
	import { validPhone } from '@/utils/validate.js';
	export default {
		name: 'shopAdmin',
		data() {
			return {
				centerDialogVisible1: false,
				pageSize: 10, // 每页条数
				pageCount: 7, //
				pageSizes: [10, 20, 30, 40, 50, 100], // 个数选择器
				currentPage: 1, // 当前页码
				total: 0, // 总条数
				formInline: {
					name: '',
					phone: '',
					shop_id: ''
				},
				form:{
					type:'',
					shop_id:'',
					xiaoqu_id:'',
					wuye_id:'',
					name:'',
					phone:'',
					password:''
				},
				rules:{
					name: [{required: true,message: "请输入管理员姓名",trigger: "change"}],
					phone: [{required: true,message: "请输入管理员手机号",trigger: "change"}],
					password: [{required: true,message: "请输入管理员密码",trigger: "change"}],
					type: [{required: true,message: "请选择管理员类型",trigger: "change"}],
					shop_id: [{required: true,message: "请选择门店",trigger: "change"}],
					wuye_id: [{required: true,message: "请选择物业",trigger: "change"}],
					xiaoqu_id: [{required: true,message: "请选择小区",trigger: "change"}],
				},
				list: [],
				shopList:[],
				xiaoqu:[],
				wuye:[],
				types:{
					1:'物业',
					2:'小区',
					3:'门店',
				}
			}
		},
		mounted() {
			this.getData();
			this.getShopData();
			this.loadAllXiaoQu();
			this.getWuyeList();
		},
		methods: {
			// 每页显示的条数
			handleSizeChange(val) {
				this.pageSize = val
				this.getData()
				// 注意：在改变每页显示的条数时，要将页码显示到第一页
				this.currentPage = 1
			},

			// 显示第几页
			handleCurrentChange(val) {
				this.currentPage = val
				// 切换页码时，要获取每页显示的条数
				this.getData()
			},
			
			// 获取门店
			getShopData(){
				Api.getShopData({},false).then(res => {
					if (res.state) {
						this.shopList = res.data
					}
				})
			},
			
			// 获取小区
			loadAllXiaoQu(){
				Api.loadAllXiaoQu({},false).then(res => {
					if (res.state) {
						this.xiaoqu = res.data
					}
				})
			},
			
			// 获取物业
			getWuyeList(){
				Api.getWuyeList({},false).then(res => {
					if (res.state) {
						this.wuye = res.data
					}
				})
			},

			onSubmit() {
				this.currentPage = 1
				this.getData()
			},

			getData() {
				const data = {
					pageNumber: this.currentPage,
					pageSize: this.pageSize,
				}
				if (this.formInline.name) {
					data['name'] = this.formInline.name
				}
				if (this.formInline.phone) {
					data['phone'] = this.formInline.phone
				}
				if (this.formInline.shop_id) {
					data['shop_id'] = this.formInline.shop_id;
				}
				// console.log(data)

				Api.userQuery(data).then(res => {
					if (res.state) {
						this.total = res.data.totalRow
						this.list = res.data.list
					}
				})
			},
			
			// 添加
			addAdmin(){
				this.centerDialogVisible1 = true;
			},
			
			//重置
			reset(formName){
				this.$refs[formName].resetFields();
				this.centerDialogVisible1=false;
			},
			
			//保存
			async submit(formName){
				this.$refs[formName].validate(async(valid) => {
					if (valid) {
						if(!validPhone(this.form.phone)){
							this.$message.error("手机格式不正确");
							return;
						}
						if(this.form.password.length<6){
							this.$message.error("密码长度不能小于6");
							return;
						}
						let res = await this.checkRepeatPhone();
						if(!res||!res.state) return;
						
						let datas={
							'user.type': this.form.type,
							'user.name': this.form.name,
							'user.phone': this.form.phone,
							'user.password': this.form.password,
						}
						
						if(this.form.type==1){
							datas['user.wuye_id'] = this.form.wuye_id
						}else if(this.form.type==2){
							datas['user.xiaoqu_id'] = this.form.xiaoqu_id
						}else if(this.form.type==3){
							datas['user.shop_id'] = this.form.shop_id
						}
						
						// console.log(datas)
						
						Api.addUser(datas).then((res) => {
							if (res.state) {
								this.centerDialogVisible1 = false;
								this.$message({
									message: res.msg,
									type: "success"
								});
								this.reset('form');
								this.getData();
							} else {
								this.$message.error(res.msg);
							}
						});
					}
				});
			},
			
			// 手机重复检验
			checkRepeatPhone(){
				return new Promise((resolve,reject)=>{
					Api.checkRepeatPhone({
						id:'',
						phone:this.form.phone
					}).then((res) => {
						resolve(res);
						if (!res.state) {
							this.$message.error(res.msg);
						}
					});
				})
			},
			
			//重置密码
			resetpass(id){
				this.$confirm('是否重置该管理员密码?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					Api.resetpass({
						id: id
					}).then(res => {
						if (res.state) {
							this.$message({
								message: res.msg,
								type: 'success'
							});
							this.getData();
						} else {
							this.$message.error(res.msg);
						}
					})
				}).catch(() => {});
			},

			// 删除
			del(id) {
				this.$confirm('是否删除该管理员?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					Api.userDelete({
						id: id
					}).then(res => {
						if (res.state) {
							this.$message({
								message: '删除成功！',
								type: 'success'
							});
							this.getData();
						} else {
							this.$message.error(res.msg);
						}
					})
				}).catch(() => {});
			},


		}
	}
</script>
<style lang="scss" scoped>
	.type-img {
		width: 60px;
		height: 60px;

		img {
			width: 100%;
			height: 100%;
		}
	}
</style>
